<template>
  <div class="shequlvshi_page">
    <Menus title="社区律师">
      <a @click="goback" href="javascript:void(0)" v-if="step">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhui.png" alt="返回">
        </div>
        <span>返回</span>
      </a>
    </Menus>
    <Tip @recall="tip.recall" :show="tip.show" :title="tip.title" comfirmTitle="咨询社区律师">
      社区律师为社区居民提供免费法律咨询，解答日常法律问题；依法为困难居民和弱势群体提供免费法律援助
    </Tip>
    <ChooseBtn :show="choose.show" @recall="chooseed" :list="choose.list" :title='choose.title' />
    <Dialogs v-model="dialog" />

    <div class="community-lawyer" v-if="!choose.show && !tip.show" style="background: url('static/img/bg/01.jpg') no-repeat center center;">
      <div class="mgt">
        <div class="content">
          <div class="c1">
            <div class="imgs"><img :src="lawyer.img"></div>
            <strong>{{lawyer.area}}</strong>
            <span>{{lawyer.community}} 社区律师</span>
          </div>
          <div class="c2">
            <h2>{{lawyer.name}} 律师
              <span><img src="static/img/icon/lvshi_yz.png"></span>
            </h2>
            <!-- <p>咨询电话：{{lawyer.phone}}</p> -->
            <ul>
              <li>联系电话：{{lawyer.phone}}</li>
              <li>所在律所：{{lawyer.lawFirm}}</li>
              <!-- <li>地址：广福路滇池度假区湖畔之梦33-2-102 </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Menus from '../components/Menu'
import Tip from '../components/Tip'
import ChooseBtn from '../components/ChooseBtn'
import Dialogs from '../components/Dialog'
import { area, street } from '../datas/point'

function loadCommunity (name) {
  return import(`@/datas/community/${name}.js`)
}

export default {
  data () {
    return {
      step: 0,
      selected: [],
      community: '',
      tip: {
        show: true,
        title: '在线申请法律援助',
        recall: this.tipCall
      },
      choose: {
        show: false,
        list: [],
        title: '选择您所在地区'
      },
      dialog: {
        show: false,
        title: '',
        cancelBtn: '返回'
      },
      lawyer: ''
    }
  },
  methods: {
    goback () {
      this.tip.show = true
      this.choose.show = false
      this.step = 0
      this.selected = []
    },
    tipCall () {
      this.tip.show = false
      this.choose.list = area
      this.choose.show = true
      this.step += 1
    },
    getStreet (v) {
      if (!street[v].length) {
        this.dialog.show = true
        this.dialog.title = '错误提示，暂无数据～'
        return
      }
      this.step += 1
      this.selected.push(v)
      this.choose.list = street[v]
    },
    async getCommunity (v) {
      const res = await loadCommunity(this.selected[0])
      this.community = res.default[v]
      this.step += 1
      this.selected.push(v)
      this.choose.list = this.community.map(v => v.community)
    },
    getLawyer (v) {
      this.choose.show = false
      let lawyer = this.community[v]
      lawyer.area = area[this.selected[0]]
      lawyer.img = lawyer.img || 'static/img/icon/lvshi_default.png'
      this.lawyer = lawyer
      // console.log(this.community[v], area[this.selected[0]])
    },
    chooseed (v) {
      if (this.step === 1) {
        this.getStreet(v)
      } else if (this.step === 2) {
        this.getCommunity(v)
      } else {
        this.getLawyer(v)
      }
    }
  },
  components: {
    Menus,
    Tip,
    ChooseBtn,
    Dialogs
  }
}
</script>
<style lang="scss" scoped>
.shequlvshi_page {
  padding-top: 160px;
  height: 100vh;
  background: #ddd;
}

.community-lawyer {
  height: 100vh;
  background-size: cover;
  .mgt {
    padding-top: 100px;
  }
  .content {
    width: 1200px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    border: solid 1px #ccc;
    margin: 0 auto;
    display: flex;
    .c1 {
      width: 430px;
      height: 500px;
      border-right: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      strong {
        display: block;
        font-size: 24px;
        font-weight: normal;
        padding: 20px 0 5px;
      }
      span {
        font-size: 18px;
      }
    }
    .c2 {
      padding: 120px 0 0 105px;
      h2 {
        font-size: 42px;
        font-weight: normal;
        display: flex;
        align-items: center;
        span {
          display: block;
          padding: 0 0 10px 20px;
        }
      }
      p {
        font-size: 28px;
      }
      ul {
        padding: 30px 0 0 0;
        list-style: none;
        font-size: 20px;
        line-height: 2;
      }
    }
  }
}
</style>
